<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增员工花名册')"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-roster-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">姓名
                ：</label>
            <div class="col-sm-8">
                <input name="fullName" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">部门
                ：</label>
            <div class="col-sm-8">
                <input name="department" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">组别
                ：</label>
            <div class="col-sm-8">
                <input name="uGroup" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">职务
                ：</label>
            <div class="col-sm-8">
                <input name="uPost" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">工号
                ：</label>
            <div class="col-sm-8">
                <input name="jobNumber" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">手机
                ：</label>
            <div class="col-sm-8">
                <input name="mobilePhone" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">邮箱
                ：</label>
            <div class="col-sm-8">
                <input name="mailbox" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">性别
                ：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('rnx_sys_gender')}">
                    <input type="radio" th:id="${dict.dictCode}" name="gender" th:value="${dict.dictValue}" th:checked="${dict.default}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">年龄
                ：</label>
            <div class="col-sm-8">
                <input name="age" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">身份证号
                ：</label>
            <div class="col-sm-8">
                <input name="idNumber" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">证件有效期
                ：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="certificateValidity" class="form-control" placeholder="yyyy-MM-dd"
                           type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">出生年月
                ：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="dateOfBirth" class="form-control" placeholder="yyyy-MM-dd"
                           type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">婚姻
                ：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('rnx_sys_marriage')}">
                    <input type="radio" th:id="${dict.dictCode}" name="marriage" th:value="${dict.dictValue}" th:checked="${dict.default}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">民族
                ：</label>
            <div class="col-sm-8">
                <input name="nation" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">入职时间
                ：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="entryDate" class="form-control" placeholder="yyyy-MM-dd"
                           type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">转正时间
                ：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="regularTime" class="form-control" placeholder="yyyy-MM-dd"
                           type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">已入职时间/月
                ：</label>
            <div class="col-sm-8">
                <input name="mob" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">是否试用期内
                ：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('rnx_sys_mob_category')}">
                    <input type="radio" th:id="${dict.dictCode}" name="mobCategory" th:value="${dict.dictValue}" th:checked="${dict.default}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">试用期薪资
                ：</label>
            <div class="col-sm-8">
                <input name="probationSalary" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">转正薪资
                ：</label>
            <div class="col-sm-8">
                <input name="regularSalary" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">合同开始
                ：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="contractStart" class="form-control" placeholder="yyyy-MM-dd"
                           type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">合同结束
                ：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="endOfContract" class="form-control" placeholder="yyyy-MM-dd"
                           type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">是否合同有效期
                ：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('rnx_sys_contract_category')}">
                    <input type="radio" th:id="${dict.dictCode}" name="contractCategory" th:value="${dict.dictValue}" th:checked="${dict.default}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
                <input name="" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">续签合同时间
                ：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="contractRenewalTime" class="form-control" placeholder="yyyy-MM-dd"
                           type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">续约到期时间
                ：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="renewalExpirationTime" class="form-control" placeholder="yyyy-MM-dd"
                           type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">学历
                ：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('rnx_sys_mob_education')}">
                    <input type="radio" th:id="${dict.dictCode}" name="education" th:value="${dict.dictValue}" th:checked="${dict.default}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">毕业院校
                ：</label>
            <div class="col-sm-8">
                <input name="universityOneIsGraduatedFrom" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">专业
                ：</label>
            <div class="col-sm-8">
                <input name="major" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">毕业时间
                ：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="graduationTime" class="form-control" placeholder="yyyy-MM-dd"
                           type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">政治面貌
                ：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('rnx_sys_political_outlook')}">
                    <input type="radio" th:id="${dict.dictCode}" name="politicalOutlook" th:value="${dict.dictValue}" th:checked="${dict.default}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">首次参加工作时间
                ：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="firstWorkingTime" class="form-control" placeholder="yyyy-MM-dd"
                           type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">籍贯
                ：</label>
            <div class="col-sm-8">
                <input name="nativePlace" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">户口性质
                ：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('rnx_sys_nature_of_household_registration')}">
                    <input type="radio" th:id="${dict.dictCode}" name="natureOfHouseholdRegistration" th:value="${dict.dictValue}" th:checked="${dict.default}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">户口所在地
                ：</label>
            <div class="col-sm-8">
                <textarea name="registeredResidence" class="form-control"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">现住址
                ：</label>
            <div class="col-sm-8">
                <textarea name="currentAddress" class="form-control"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">紧急联系人
                ：</label>
            <div class="col-sm-8">
                <input name="emergencyContactName" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">与本人关系
                ：</label>
            <div class="col-sm-8">
                <input name="relationshipWithMyself" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">紧急联系人电话
                ：</label>
            <div class="col-sm-8">
                <input name="emergencyContactNumber" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">银行
                ：</label>
            <div class="col-sm-8">
                <textarea name="bank" class="form-control"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">开户行
                ：</label>
            <div class="col-sm-8">
                <textarea name="bankOfDeposit" class="form-control"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">银行卡号
                ：</label>
            <div class="col-sm-8">
                <input name="bankCardNumber" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注
                ：</label>
            <div class="col-sm-8">
                <textarea name="remarks" class="form-control"></textarea>
            </div>
        </div>
    </form>
    <div>
<!--        <a class="btn btn-info" onclick="generateQrCode()">-->
<!--            <i class="fa fa-download"></i> 生成邀请码-->
<!--        </a>-->
    </div>
    <img id="qr"/>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "system/roster"
    $("#form-roster-add").validate({
        focusCleanup: true,
        rules: {
            mobilePhone: {
                required: true,
                isPhone: true
            }
        }
    });

    //二维码生成
    function generateQrCode(){
        //手机号不能为空
        let phone = $('input[name="mobilePhone"]').val();
        if(jQuery.isEmptyObject(phone)){
            $.modal.alertError("手机号不能为空!");
            return;
        }
        $.ajax(
            {
                url: prefix + "/invite2/"+phone,
                type: 'GET',
                success: function(res){
                    if(res.code == 0){
                        let imageStr = "data:image/jpeg;base64," + res.data;
                        $("#qr").attr("src", imageStr);
                    }else{
                      $.modal.alertError(res.msg);
                    }
                }
            }
        );
        /*$.operate.get(prefix + "/invite2/"+phone, (r) => {
           window.location.href = ctx + "common/download/resource?resource=" + r.data
        });*/
    }

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-roster-add').serialize());
        }
    }

    $("input[name='dateOfBirth']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='entryDate']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='regularTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='contractStart']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='endOfContract']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='contractRenewalTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='renewalExpirationTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='graduationTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='certificateValidity']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='firstWorkingTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
</script>
</body>
</html>